<template>
	<!-- 注: 本示例仅演示mescroll-body写在一层子组件的情况, 其实同样适用mescroll-body写在子子..子组件的情况, 只需每一层都要写上第一步和第二步的代码即可 -->
	 <view class="home">
		 <!-- 头部 start -->
     <!-- 头部 start -->
     <uni-nav-bar
      fixed="true"
      statusBar="true"
      leftBtnShow="true"
      :backgroundImage="backgroundImage"
      :border="false"
      leftIcon="back"
      color="#fff"
      @clickLeft="clickLeft"
    >
       <view class="uni-title">{{title}}</view>
    </uni-nav-bar>
    <!-- 头部 end -->
     <!-- 背景图 -->
		 <!-- 内容 start -->
    <view>
      <mescroll-item ref="mescrollItem" :hospId="hospId"></mescroll-item>
    </view>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-comp-item.vue"; // 一个mescroll-body写在子组件的情况
	// import MescrollItem from "./mescroll-more.vue"; // 多个mescroll-body写在子组件的情况
	import hccmStore from "@/common/hccm-store.js"
	// 第二步: 引入mescroll-comp.js
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	export default {
		mixins: [MescrollCompMixin],
		components: {
			MescrollItem
		},
    onLoad(options){
      console.log(options)
      this.hospId = options.hospId || '' 
    },
    data(){
      return{
        userInfo: hccmStore.getUser(),
        hospId: '',
        title: '订单列表', 
        backgroundImage: 'linear-gradient(#3388FF, #6197f8)'
      }
    },
    methods:{
      // 返回
      clickLeft() {
        uni.navigateBack()
      },
    }
	}
</script>

<style lang="scss">
@import "@/static/css/index.scss";
// begin
.home {
  height: 100%;
  overflow: hidden;
  .drag-box{
    flex: 1;
    width: 100%;
  }
  .dragList{
    width: 100%;
    padding: 0 30rpx 0;
    flex: 1;
    overflow: auto;
    box-sizing: border-box;
    .list{
      padding: 24rpx 24rpx 20rpx 24rpx;
      width: 100%;
      margin-bottom: 40rpx;
      background: #fff;
      border-radius: 10rpx;
      box-sizing: border-box;
      box-shadow:2px 2px 10px rgba($color: #000000, $alpha: 0.2);
      position: relative;
      .status{
        position: absolute;
        right: 0rpx;
        top: 26rpx;
        font-size: 26rpx;
        color: #fff;
        padding: 10rpx 20rpx 10rpx 36rpx;
        border-radius: 30rpx 0 0 30rpx;
      }
      .status1{
        background: #ED5E5E;
      }
      .status3{
        background: #67C23A;
      }
      .listInfo{
        justify-content: start;
        padding: 18rpx;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;
        .name{
          font-size: 28rpx;
          width: 140rpx;
          font-weight: 400;
          color: #777777;
        }
      }
    }
  }
  .title{
    font-size: 36rpx;
    color: #000000;
    font-weight: 600;
    padding: 20rpx 0;
    position: relative;
    .u-icon{
      position: absolute;
      right: 40rpx;
      top: 36rpx;
    }
  }
  .drugsInfo{
    background: #F1F8FE;
    padding: 24rpx;
    border-radius: 10rpx;
    width: 100%;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: 400;
    margin-bottom: 20rpx;
  }
}
</style>
